<template>
  <div>
    <Category :isShow="isShow"></Category>

    <el-card style="margin: 10px 0px" v-show="Scene == 0">
      <el-button
        type="primary"
        icon="Plus"
        :disabled="CategoryStore.c3Id ? false : true"
        @click="addSpu"
        v-has="`btn.Spu.add`"
        >添加SPU</el-button
      >
      <!-- 表格 -->
      <el-table style="margin: 10px 0px" :data="records">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>
        <el-table-column
          label="SPU描述"
          prop="description"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="SPU操作">
          <template #="{ row }">
            <el-button
              type="primary"
              icon="Plus"
              size="small"
              title="添加spu"
              @click="addSku(row)"
              v-has="`btn.Spu.addsku`"
            ></el-button>
            <el-button
              type="success"
              icon="Edit"
              size="small"
              title="修改spu"
              @click="updatespu(row)"
              v-has="`btn.Spu.update`"
            ></el-button>
            <el-button
              type="info"
              icon="Warning"
              size="small"
              title="查看spu"
              @click="findSku(row)"
              v-has="`btn.Spu.skus`"
            ></el-button>
            <el-popconfirm
              :title="`你确定删除${row.spuName}吗?`"
              @confirm="DeleteSpu(row)"
            >
              <template #reference>
                <el-button
                  type="danger"
                  icon="delete"
                  size="small"
                  title="删除spu"
                  v-has="`btn.Spu.delete`"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 7, 9]"
        :background="true"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @current-change="HasAllSpuList"
        @size-change="changeSize"
      />
    </el-card>
    <el-card v-show="Scene == 1" style="margin: 10px 0px">
      <SpuForm @changeScene="changeScene" ref="spu"></SpuForm>
    </el-card>
    <el-card v-show="Scene == 2" style="margin: 10px 0px">
      <SkuForm @changeScene="changeScene" ref="sku"></SkuForm>
    </el-card>
    <!-- 通过v-model来控制对话框的显示与隐藏 -->
    <el-dialog title="SKU列表" v-model="show">
      <el-table :data="skuArr">
        <el-table-column label="SKU名称" prop="skuName"></el-table-column>
        <el-table-column label="SKU价格(元)" prop="price"></el-table-column>
        <el-table-column label="SKU重量(斤)" prop="weight"></el-table-column>
        <el-table-column label="SKU图片" prop="weight">
          <template #="{ row }">
            <img
              :src="row.skuDefaultImg"
              alt=""
              style="width: 100px; height: 100px"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onBeforeUnmount } from "vue";
//引入组件
import SpuForm from "./spuForm.vue";
import SkuForm from "./skuForm.vue";
//控制场景切换
let Scene = ref<number>(0); // 0展示spu.1展示添加修改spu,2展示添加sku
//引入接口
import {
  getSpuList,
  reqGetSkuInfo,
  reqDeleteSpu,
} from "@/api/produck/spu/index";
//引入类型
import type { ResponesSpu, Record } from "@/api/produck/spu/type";
//引入仓库
import useCategoryStore from "@/store/modules/Category";
import { ElMessage } from "element-plus";
//获取仓库信息
let CategoryStore = useCategoryStore();
let isShow = ref<number>(0);
//获取组件实例
let spu = ref<any>();
//当前页
let pageNo = ref<number>(1);
//每页多少个
let pageSize = ref<number>(3);
//总页数
let total = ref<number>(0);
//定义一个数组接收返回的数据
let records = ref<Record>([]);
//sku组件实例
let sku = ref();
//sku信息
let skuArr = ref<any>([]);
//控制对话框的显示与隐藏
let show = ref<boolean>(false);
//监视仓库中的c3Id
watch(
  () => CategoryStore.c3Id,
  () => {
    //保证仓库中的c3Id有值
    if (!CategoryStore.c3Id) return;
    //获取spu列表
    HasAllSpuList();
  },
);
//监视Scene
watch(Scene, () => {
  if (Scene.value != 0) {
    isShow.value = 1;
  }
  if (Scene.value == 0) {
    isShow.value = 0;
  }
});
//销毁组件之前，清空仓库数据
onBeforeUnmount(() => {
  //清空仓库数据
  CategoryStore.$reset();
});
//此函数执行，会获取当前三级分类所有spu的信息
const HasAllSpuList = async (page = 1) => {
  pageNo.value = page;
  let result: ResponesSpu = await getSpuList(
    pageNo.value,
    pageSize.value,
    CategoryStore.c3Id,
  );
  if (result.code == 200) {
    records.value = result.data.records;
    total.value = result.data.total;
  }
};
//改变每页多少个
const changeSize = () => {
  pageNo.value = 1;
  HasAllSpuList();
};
//添加spu属性
const addSpu = () => {
  //切换场景
  Scene.value = 1;
  //调用子组件的方法,将三级分类id传递给子组件
  spu.value.addSonAttr(CategoryStore.c3Id);
};
//自定义事件，用于切换场景值
const changeScene = (obj: any) => {
  Scene.value = obj.flag;
  if (obj.parmas == "update") {
    HasAllSpuList(pageNo.value);
  } else {
    HasAllSpuList();
  }
};
//修改spu属性
const updatespu = (row: any) => {
  Scene.value = 1;
  //调用子组件的方法,将数据传递给子组件
  spu.value.HasAllSpuList(row);
};
//添加sku按钮事件
const addSku = (row: any) => {
  //切换场景
  Scene.value = 2;
  //调用子组件方法,传入组件接口需要的数据
  sku.value.initSkuDate(CategoryStore.c1Id, CategoryStore.c2Id, row);
};
//查看sku详细
const findSku = async (row: any) => {
  //显示对话框
  show.value = true;
  let result = await reqGetSkuInfo(row.id);
  if (result.code == 200) {
    skuArr.value = result.data;
  }
};
//删除spu
const DeleteSpu = async (row: any) => {
  let result = await reqDeleteSpu(row.id);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
    //再次获取数据
    if (records.value.length == 1) {
      HasAllSpuList(pageNo.value - 1);
    }
    HasAllSpuList();

    return "ok";
  } else {
    ElMessage({
      type: "error",
      message: "删除失败",
    });
    return Promise.reject(new Error("fail"));
  }
};
</script>
